<template>
    <div id="RoleManager">
       <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
      <!-- 搜索框 -->
      <el-row :gutter="20" class="opt_div">
          <el-input placeholder="请输入角色名称" v-model="roleName" class="search_input" style="width:40%" size="mini">
                <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
         </el-input>

      <div class="div_btn">
         <el-col :span="4">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openAddRoleDialog" size="mini">添加角色</el-button>
         </el-col>
      </div>

      </el-row>
       <el-table :data="roleList" border size="mini">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="roleNote" label="角色信息" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作"> 
            <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" circle size="mini" title="修改"  @click="updateRoleDialog(scope.row.roleId)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle title="删除" @click="delRole(scope.row.roleId)" size="mini"></el-button>
                <el-button type="primary" icon="el-icon-key" circle title="分配权限" @click="editRoleMenu(scope.row.roleId)" size="mini"></el-button>
            </template>  
        </el-table-column>
       </el-table>
        <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>

    </el-card>

     <!-- 添加角色对话框 -->
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible" :close-on-press-escape="false">
        <el-form :model="addRoleForm" :rules="rules" ref="addRoleForm">
            <el-form-item label="角色名称" label-width="100px" prop="roleName">
            <el-input v-model="addRoleForm.roleName" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="角色信息" label-width="100px">
            <el-input type="textarea" v-model="addRoleForm.roleNote" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addRole('addRoleForm')">确 定</el-button>
        </div>
    </el-dialog>

       <!-- 修改角色对话框 -->
    <el-dialog title="修改角色" :visible.sync="dialogFormVisibleUpdate" :close-on-press-escape="false">
        <el-form :model="updateRoleForm" :rules="rules" ref="updateRoleForm">
            <el-form-item label="角色名称" label-width="100px" prop="roleName">
            <el-input v-model="updateRoleForm.roleName" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="角色信息" label-width="100px">
            <el-input type="textarea" v-model="updateRoleForm.roleNote" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
            <el-button type="primary" @click="updateRole('updateRoleForm')">确 定</el-button>
        </div>
    </el-dialog>
   
    </div>
</template>
<script>
export default {
    name:"RoleManager",
    data(){
        return{
            roleName:"",
            roleList:[],
            pageIndex:1,
            total:10,
            pageSize:3,
            dialogFormVisible:false,
            dialogFormVisibleUpdate:false,
            addRoleForm:{},
            updateRoleForm:{},
            rules:{
               roleName:[
                   {required:true,message:'请输入角色名称',trigger:'blur'}
               ]
           },
           userRoleId:"",

        }
    },
    methods:{
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getRoleList(this.roleName,this.pageIndex,this.pageSize);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageIndex = val;
        this.getRoleList(this.roleName,this.pageIndex,this.pageSize);
      },

      //模糊查询按钮
      searchRole(){
        this.pageIndex=1
        this.getRoleList(this.roleName,this.pageIndex,this.pageSize)
      },

      //打开添加对话框
      openAddRoleDialog(){
          this.dialogFormVisible=true
      },

      //添加角色
      addRole(formName){
           this.$refs[formName].validate((valid)=>{
                if(valid){
                   this.$axios.post("/role-info/addRole",this.addRoleForm).then(res=>{
                       console.log(res)
                         if (res.data.code ==200){
                            this.$message.success("添加成功")
                              this.pageIndex=1
                              this.getRoleList(this.roleName,this.pageIndex,this.pageSize)
                              this.dialogFormVisible= false
                        } else {
                              this.$message.error(res.data.msg)
                        }
                   }).catch(err=>{
                       console.log(err)
                   })

                }else{
                    return false;
                }
            });  
       },
      //打开修改对话框
      updateRoleDialog(roleId){
           this.$axios.post("/role-info/getRoleById","roleId="+roleId).then(res=>{
               console.log(res)
               this.updateRoleForm=res.data.data
               this.dialogFormVisibleUpdate=true
           }).catch(err=>{

           })  
      },
      //修改角色
      updateRole(formName){
          this.$refs[formName].validate((valid)=>{
           if(valid){
                   this.$axios.post("/role-info/updateRole",this.updateRoleForm).then(res=>{
                       console.log(res)
                         if (res.data.code ==200){
                            this.$message.success("修改成功")
                              this.pageIndex=1
                              this.getRoleList(this.roleName,this.pageIndex,this.pageSize)
                              this.dialogFormVisibleUpdate= false
                        } else {
                              this.$message.error(res.data.msg)
                        }
                   }).catch(err=>{
                       console.log(err)
                   })

                }else{
                    return false;
                }
            }); 
       },

      //删除
      delRole(roleId,userRoleId){

          //删除时不可删除登录用户的角色
        var userRoleId=JSON.parse(sessionStorage.getItem('user')).data.roleId;
        this.userRoleId=userRoleId
        console.log(userRoleId)

          console.log(roleId)
             this.$confirm('此操作将删除该角色，并且相应角色的用户也将被删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    this.$axios.post("/role-info/delRoleById","roleId="+roleId+"&userRoleId="+userRoleId).then(res=>{
                        if (res.data.code==200) {
                            this.$message.success("删除成功")
                            this.pageIndex=1
                            this.getRoleList(this.roleName,this.pageIndex,this.pageSize)
                        }else{
                            if(res.data.code==900){
                            this.$message.error("该角色正在使用,不能删除")
                            }
                            else{
                               this.$message.error("删除失败")
                            }     
                        }
                    })
            }).catch(() => {
            this.$message({
                    type: 'info',
                    message: '已取消删除'
            });          
            });

      },
      //分配权限
      editRoleMenu(roleId){
         this.$router.push({name:"EditRoleMenu",params:{roleId:roleId}})
      },

      //查询所有角色信息
      getRoleList(roleName,pageIndex,pageSize){
          var params = new URLSearchParams();
          params.append("roleName",roleName)
          params.append("pageIndex",pageIndex)
          params.append("pageSize",pageSize)
         
         this.$axios.post('/role-info/getRoleList',params).then(res=>{
             console.log(res)
             this.roleList=res.data.data.list
             this.total=res.data.data.total
          }).catch(err=>{
              console.log(err)
          })

      }

    },
    created(){
        this.getRoleList(this.roleName,this.pageIndex,this.pageSize);
         
    }

}
</script>
<style scoped>
.el-breadcrumb{
    margin-bottom: 20px;
}
.el-table{
    margin-top: 20px;
    margin-bottom: 20px;
}
.search_input{
    margin-left: 10px;
}
.opt_div{
    display: flex;
}
.div_btn{
    width: 70%;
    display: flex;
    justify-content: right;
    margin-right: 10px;
}
</style>